<template>
  <div class="min-h serveProject bg-wt">
    <SearchForm :searchData="pagination" 
    @handleClear="handleClear" 
    @handleReset="handleReset"
      @handleSearch="handleSearch"></SearchForm>

    
        <TableList 
        :data="data"
        :total="total"
        :pagination="pagination"
        @onPageChange="onPageChange"
        @handleBulid="handleBulid"
        >
      </TableList>
      <DialogForm 
    ref="formRef"
    :visible="visible"
    :title="title"
    @handleClose="handleClose"
    @handle-add="handleAdd"
    >
  </DialogForm>
  </div>
</template>
     

<script setup lang="ts">

import TableList  from './components/TableList.vue'
import { ref, onMounted } from 'vue';
import { getProjectList,projectAdd } from '@/api/serve'
import SearchForm from './components/SearchForm.vue'
import DialogForm from './components/DialogForm.vue'
import { MessagePlugin } from 'tdesign-vue-next'


const data = ref([])
const total = ref(0)

const pagination = ref({
  pageSize: 10,
  pageNum: 1,
  total,
});
//生命周期
onMounted(() => {
  getList()
})

//获取列表数据
const getList = async () => {
  const res = await getProjectList(pagination.value)
  data.value = res.data.records
  total.value = Number(res.data.total)
}

// 翻页设置当前页
const onPageChange = (val) => {
  pagination.value.pageNum = val.current
  pagination.value.pageSize = val.pageSize
  getList()
}
//重置搜索框
const handleReset = () => {
  //重置页码
  pagination.value = {
    pageNum: 1,
    pageSize: 10
  }
  getList()
}

//搜索
const handleSearch = () => {
  //点击了搜索按钮之后，就需要重置页码
  pagination.value.pageNum = 1
  getList()
}

//清空
const handleClear = (val) => {
  if(val === 'name'){
    delete pagination.value.name
  }else{
    delete pagination.value.status
  }
  getList()
}


//是否显示弹窗
var visible = ref(false)
const formRef = ref(null)
const title = ref('') // 弹窗标题
const formBaseData = ref({}) // 弹窗表单内容

//点击新增护理项目 按钮 把visible设置为true，弹出
const handleBulid = () =>{
  title.value = '新增'
  visible.value = true;
}
//点击弹窗中的关闭或取消，关闭弹窗
const handleClose = () =>{
  visible.value = false;
}
// 添加
const handleAdd = async (val) => {
  const res = await projectAdd(val)
  if (res.code === 200) {
    MessagePlugin.success('添加成功')
    getList()
    handleClose()
    formRef.value.handleClear()
  } else {
    MessagePlugin.error(res.msg)
  }
}
</script>